import { createStore } from "vuex";
import {
    DECREASE_SALARY,
    CHECKOUT_REQUEST,
    CHECKOUT_SUCCESS,
    CHECKOUT_FAILURE,
} from "./mutation-types.js";
import shop from "../api/shop.js";

export default createStore({
    state: {
        count: 0,
        name: "北京拜登",
        age: 80,
        todos: [
            {
                id: 1,
                name: "让你的狗咬人",
                done: true,
            },
            {
                id: 2,
                name: "迫使对方踢你的狗",
                done: true,
            },
            {
                id: 3,
                name: "招呼邻里都来谴责和制裁踢狗的人",
                done: true,
            },
            {
                id: 4,
                name: "让丫混不下去",
                done: false,
            },
        ],
        salary: 5000,
        cart: {
            added: [
                {
                    id: 1,
                    checked: true,
                    name: "大毛熊牌战略武器",
                    price: 100,
                    count: 10,
                },
                {
                    id: 2,
                    checked: false,
                    name: "鹰酱F35",
                    price: 10000,
                    count: 1,
                },
                {
                    id: 3,
                    checked: true,
                    name: "乌克兰喜剧演员",
                    price: 0.5,
                    count: 1,
                },
            ],
            bought: [],
            status: "unchecked",
        },
        data: null,
        otherData: null,
    },
    mutations: {
        increment(state, n) {
            state.count += n * 1;
        },
        incrementSalary(state, payload) {
            state.salary += payload.amount;
        },
        // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
        [DECREASE_SALARY](state, payload) {
            // 修改 state
            state.salary -= payload.amount;
        },
        // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
        [CHECKOUT_REQUEST](state) {
            // 修改 state
            state.cart.status = "checking...";
            state.cart.added = [];
        },
        [CHECKOUT_SUCCESS](state, { products, uncheckedProducts }) {
            // 修改 state
            state.cart.status = "done";
            state.cart.bought = products;
            state.cart.added = uncheckedProducts;
        },
        [CHECKOUT_FAILURE](state, savedCartItems) {
            // 修改 state
            state.cart.status = "unchecked";
            state.cart.added = savedCartItems;
        },
        gotData(state, payload) {
            state.data = payload;
        },
        gotOtherData(state, payload) {
            state.otherData = payload;
        },
    },
    getters: {
        doneTodos: (state) => {
            return state.todos.filter((todo) => todo.done);
        },
        doneTodosCount(state, getters) {
            return getters.doneTodos.length;
        },
        getTodoById: (state) => (id) => {
            return state.todos.find((todo) => todo.id === id);
        },
        checkedProducts: (state) => {
            return state.cart.added.filter((p) => p.checked);
        },
        uncheckedProducts: (state) => {
            return state.cart.added.filter((p) => !p.checked);
        },
    },
    actions: {
        // increment(context) {
        //     context.commit("increment");
        // },
        increment({ commit }) {
            commit("increment", 1);
        },
        // incrementAsync({ commit }) {
        //     setTimeout(() => {
        //         commit("increment",1);
        //     }, 1000);
        // },
        incrementAsync({ commit, state }, playload) {
            setTimeout(() => {
                commit("increment", playload.amount);
            }, 1000);
        },

        //
        checkout({ commit, state }, { products }) {
            // 把当前购物车的物品备份起来
            const savedCartItems = [...state.cart.added];
            const uncheckedProducts = this.getters.uncheckedProducts;
            console.log("uncheckedProducts", uncheckedProducts);

            // 发出结账请求，然后乐观地清空购物车
            commit(CHECKOUT_REQUEST);

            // 购物 API 接受一个成功回调和一个失败回调
            shop.buyProducts(
                products,
                // 成功操作
                () => commit(CHECKOUT_SUCCESS, { products, uncheckedProducts }),
                // 失败操作
                () => commit(CHECKOUT_FAILURE, savedCartItems)
            );
        },

        // 组合action
        async actionA({ commit }) {
            commit("gotData", await shop.getData());
        },
        async actionB({ dispatch, commit }) {
            await dispatch("actionA"); // 等待 actionA 完成
            commit("gotOtherData", await shop.getOtherData());
        },
    },
    modules: {},
});
